<template>
  <div style="width: 60%; margin: auto">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="75px"
      class="demo-ruleForm"
      style="width: 95%; border: 5px white solid; padding: 15px"
      id="id"
    >
      <el-form-item label="公司id" prop="id">
        <el-input v-model="ruleForm.id"></el-input>
      </el-form-item>
      <el-form-item label="公司名称" prop="comname">
        <el-input v-model="ruleForm.comname"></el-input>
      </el-form-item>
      <el-form-item label="公司位置" prop="comlocation">
        <el-input v-model="ruleForm.comlocation"></el-input>
      </el-form-item>
      <el-form-item label="经纬度" prop="location">
        <el-input v-model="ruleForm.location"></el-input>
      </el-form-item>
      <el-form-item label="员工数" prop="pernum">
        <el-input v-model="ruleForm.pernum"></el-input>
      </el-form-item>
      <el-form-item label="负责人" prop="dutyper">
        <el-input v-model="ruleForm.dutyper"></el-input>
      </el-form-item>
      <el-form-item label="身份证号" prop="idcard">
        <el-input v-model="ruleForm.idcard"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="ruleForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="ruleForm.email"></el-input>
      </el-form-item>
      <el-form-item label="微信" prop="wx">
        <el-input v-model="ruleForm.wx"></el-input>
      </el-form-item>
      <el-form-item label="公司logo" prop="comlogo">
        <!-- <el-input v-model="ruleForm.comlogo"></el-input> -->
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          type="textarea"
          v-model="ruleForm.remark"
          class="textarea"
        ></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
/* .textarea{
    rows:6rem;
    cols:70rem;
} */
</style>

<script>
export default {
  data() {
    return {
      ruleForm: {
        id: "",
        comname: "",
        comlocation: "",
        location: "",
        pernum: "",
        dutyper: "",
        idcard: "",
        phone: "",
        email: "",
        wx: "",
        comlogo: "",
        remark: "",
        imageUrl: "",
      },
      rules: {
        id: [
          { required: true, message: "请输入公司id", trigger: "blur" },
          { max: 255, message: "长度不大于255个字符", trigger: "blur" },
        ],
        comname: [
          { required: true, message: "请输入公司名称", trigger: "blur" },
        ],
        comlocation: [
          { required: true, message: "请输入公司位置", trigger: "blur" },
        ],
        location: [
          { required: true, message: "请输入经纬度", trigger: "blur" },
        ],
        pernum: [{ required: true, message: "请输入员工数", trigger: "blur" }],
        dutyper: [{ required: true, message: "请输入负责人", trigger: "blur" }],
        idcard: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
        ],
        phone: [{ required: true, message: "请输入电话", trigger: "blur" }],
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
        wx: [{ required: true, message: "请输入微信", trigger: "blur" }],
        comlogo: [
          { required: true, message: "请输入公司logo", trigger: "blur" },
        ],
        remark: [{ required: true, message: "请输入备注" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>
